<template>
  <PageWrapper
    :title="`用户` + username + `的资料`"
    content="这是用户资料详情页面。本页面仅用于演示相同路由在tab中打开多个页面并且显示不同的数据"
    contentBackground
    @back="goBack"
  >
    <template #extra>
      <a-button type="primary" danger v-if="state === 0" @click="handleState(1)">
        禁用账号
      </a-button>
      <a-button type="primary" success v-else @click="handleState(0)">启用账号</a-button>
      <a-button type="primary" @click="handlePassword"> 修改密码 </a-button>
    </template>
    <div class="pt-4 m-4 desc-wrap">
      <!-- <template v-if="currentKey == 'detail'">
        <div v-for="i in 10" :key="i">这是用户{{ username }}资料Tab</div>
      </template> -->
      <template v-if="currentKey == 'logs'">
        <PageWrapper title="日志信息" content="用户请求接口的日志信息">
          <BasicTable @register="registerTable" class="w-full xl:full" :search-info="searchInfo">
            <template #bodyCell="{ column, text }">
              <template v-if="column.key === 'state'">
                <template v-if="text === 0">
                  <Tag color="success">
                    <template #icon>
                      <CheckCircleOutlined />
                      请求成功
                    </template>
                  </Tag>
                </template>
                <template v-else>
                  <Tag color="error">
                    <template #icon>
                      <CloseCircleOutlined />
                    </template>
                    请求失败
                  </Tag>
                </template>
              </template>
            </template>
          </BasicTable>
        </PageWrapper>
      </template>
    </div>
    <PasswordModal @register="registerModal"></PasswordModal>
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, unref } from 'vue'
  import { useRoute } from 'vue-router'
  import { PageWrapper } from '/@/components/Page'
  import { useGo } from '/@/hooks/web/usePage'
  import { useTabs } from '/@/hooks/web/useTabs'
  import { message, Tabs, Tag, Modal } from 'ant-design-vue'
  import { useTable } from '/@/components/Table'
  import { getUserById, updateUser } from '/@/api/demo/system'
  import { simplyColumns } from '/@/views/demo/system/logs/operationLog.data'
  import { listLog } from '/@/api/demo/operationLog'
  import { searchFormSchema } from '/@/views/demo/system/logs/operationLog.data'
  import BasicTable from '/@/components/Table/src/BasicTable.vue'
  import { CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
  import { AccountUpdateParams } from '/@/api/demo/model/systemModel'
  import { useI18n } from '/@/hooks/web/useI18n'
  import { useMessage } from '/@/hooks/web/useMessage'
  import PasswordModal from './PasswordModal.vue'
  import { useModal } from '/@/components/Modal'

  export default defineComponent({
    name: 'AccountDetail',
    components: {
      PasswordModal,
      BasicTable,
      PageWrapper,
      ATabs: Tabs,
      Tag,
      ATabPane: Tabs.TabPane,
      CloseCircleOutlined,
      CheckCircleOutlined,
      Modal,
    },
    setup() {
      const { createErrorModal } = useMessage()
      const { t } = useI18n()
      const route = useRoute()
      const go = useGo()
      const [registerModal, { openModal }] = useModal()
      // 此处可以得到用户ID
      const userId = ref(route.params?.id)
      const currentKey = ref('logs')
      const { setTitle } = useTabs()
      // TODO
      // 本页代码仅作演示，实际应当通过userId从接口获得用户的相关资料
      const username = ref<string>('')
      const state = ref<Number>()
      getUserById(userId.value.toString())
        .then((res) => {
          username.value = res.username
          setTitle('详情：用户' + res.username)
          state.value = res.state
        })
        .catch()
      function goBack() {
        // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
        go('/system/account')
      }
      const searchInfo = reactive<Recordable>({
        userId: userId.value.toString(),
      })
      const [registerTable] = useTable({
        title: '日志列表',
        api: listLog,
        rowKey: 'id',
        columns: simplyColumns,
        formConfig: {
          labelWidth: 120,
          schemas: searchFormSchema,
          autoSubmitOnEnter: true,
        },
        useSearchForm: true,
        showTableSetting: true,
        bordered: true,
      })
      const handleState = (s: number) => {
        const params: AccountUpdateParams = {
          id: userId.value.toString(),
          state: s,
        }
        updateUser(params)
          .then(() => {
            state.value = s
            message.success(t('sys.api.successMessage'))
          })
          .catch((error) => {
            createErrorModal({
              title: t('sys.api.errorTip'),
              content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
            })
          })
      }

      const handlePassword = ({ values }) => {
        openModal(true, { id: unref(userId), ...values })
      }
      return {
        registerModal,
        username,
        userId,
        currentKey,
        goBack,
        registerTable,
        searchInfo,
        state,
        handleState,
        handlePassword,
      }
    },
  })
</script>

<style></style>
